<template>

  <el-form :inline="true" :model="customerQuery" :rules="customerRules">
    <el-form-item label="负责人">
      <el-select
          v-model="customerQuery.ownerId"
          placeholder="请选择负责人"
          @click="loadOwner"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in ownerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="所属活动">
      <el-input v-model="customerQuery.activityName" placeholder="请输入所属活动名称" clearable />
    </el-form-item>

    <el-form-item label="姓名">
      <el-input v-model="customerQuery.fullName" placeholder="请输入姓名" clearable />
    </el-form-item>

    <el-form-item label="称呼">
      <el-select
          v-model="customerQuery.appellation"
          placeholder="请选择称呼"
          @click="loadAppellation"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in appellationOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="是否贷款">
      <el-select
          v-model="customerQuery.needLoan"
          placeholder="是否需要贷款"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in needLoanOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="意向状态">
      <el-select
          v-model="customerQuery.intentionState"
          placeholder="请选择意向状态"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in intentionStateOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>


    <el-form-item label="线索状态">
      <el-select
          v-model="customerQuery.state"
          placeholder="请选择线索状态"
          @click="loadState"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in clueStateOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="线索来源">
      <el-select
          v-model="customerQuery.source"
          placeholder="请选择线索来源"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in sourceOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="意向产品">
      <el-select
          v-model="customerQuery.intentionProduct"
          placeholder="请选择意向产品"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in productOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>



    <el-form-item>
      <el-button type="primary" @click="onSearch">搜 索</el-button>
      <el-button type="primary" plain @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>


  <el-button type="primary" class="btn" @click="batchExportExcel">批量导出(Excel)</el-button>
  <el-button type="success" class="btn" @click="chooseExportExcel">选择导出(Excel)</el-button>

  <el-table
      :data="customerList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column property="ownerDO.name" label="负责人" width="120"/>
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column label="姓名">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.clueDO.fullName }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.typeValue" label="称呼"/>
    <el-table-column property="clueDO.phone" label="手机" width="120"/>
    <el-table-column property="clueDO.weixin" label="微信" width="120"/>
    <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
    <el-table-column property="intentionStateDO.typeValue" label="意向状态"/>
<!--    <el-table-column property="stateDO.typeValue" label="线索状态"/>-->
    <el-table-column property="stateDO.typeValue" label="线索状态" >
      <template #default="scope" >
        <span style="background: lightgoldenrodyellow" v-if="scope.row.stateDO.id === -1">{{scope.row.stateDO.typeValue}}</span>
        <span v-else>{{scope.row.stateDO.typeValue}}</span>
      </template>
    </el-table-column>

    <el-table-column property="sourceDO.typeValue" label="线索来源"/>
    <el-table-column property="intentionProductDO.name" label="意向产品"/>
<!--    <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>-->
    <el-table-column label="操作" width="85">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="toPage"
        @next-click="toPage"
        @current-change="toPage"/>
  </p>

</template>

<script>
import {doGet} from "../http/httpRequest.js";
import axios from "axios";
import {getToken, messageTip} from "../util/util.js";

export default {
  name: "CustomerView",

  //注入
  inject : ['reload'],

  data() {
    return {
      //客户列表数据对象，初始值为空
      customerList: [{
        clueDO: {},
        activityDO: {},
        appellationDO: {},
        needLoanDO: {},
        intentionStateDO: {},
        intentionProductDO: {},
        stateDO: {},
        sourceDO: {},
        ownerDO: {},
      }],
      //分页时每页显示多少条数据
      pageSize: 0,
      //分页总共查询多少条数据
      total: 0,
      //客户的id数组，初始值为空
      customerIdArray : [],
      //客户搜索表单对象，初始值是空
      customerQuery: {},
      //负责人下拉选项
      ownerOptions: [],
      //所属活动下拉选项
      activityOptions:[],
      //线索来源下拉选项
      sourceOptions:[],
      //称呼的下拉选项
      appellationOptions:[],
      //是否贷款下拉选项
      needLoanOptions:[],
      //意向状态的下拉选项
      intentionStateOptions:[],
      //意向产品下拉选项
      productOptions:[],
      //线索状态的下拉选项
      clueStateOptions:[],

    }
  },

  mounted() {
    this.getData(1);
    this.loadDicValue('appellation');
    this.loadDicValue('needLoan');
    this.loadDicValue('intentionState');
    this.loadDicValue('clueState');
    this.loadDicValue('source');
    this.loadDicValue('product');
  },


  methods: {
    //勾选或者取消勾选时，触发该函数（已经勾选的数据会传给我们这个函数）
    handleSelectionChange(selectionDataArray) {
      this.customerIdArray = [];//清空一下之前选中的数据，只需要最后一次的选中的数据
      selectionDataArray.forEach(data=>{
        let customerId = data.id;
        this.customerIdArray.push(customerId);
      })
    },

    //查询客户列表
    getData(current) {
      doGet("/api/customers", {
        current: current, //当前查询第几页
        //9个搜索条件参数
        ownerId: this.customerQuery.ownerId, //负责人id
        activityName: this.customerQuery.activityName, //活动名称
        fullName: this.customerQuery.fullName, //姓名
        appellation: this.customerQuery.appellation,//称呼
        needLoan: this.customerQuery.needLoan,//是否需要贷款
        intentionState: this.customerQuery.intentionState,//意向状态
        Product: this.customerQuery.intentionProduct,//意向产品
        state: this.customerQuery.state,//线索状态
        source: this.customerQuery.source,//线索来源
      }).then(resp => {
        if (resp.data.code === 200) {
          this.customerList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数（current是element-plus组件传过来，就是传的当前页）
    toPage(current) {
      this.getData(current);
    },

    exportExcel(ids) {
      let token = getToken();
      //1、点一下批量导出按钮，向后端发个请求（我们写这个代码，使用iframe发一个请求）
      let iframe = document.createElement("iframe");
      if (ids) {
        iframe.src = axios.defaults.baseURL + "api/exportExcel?Authorization=" + token + "&ids=" + ids;
      } else {
        iframe.src = axios.defaults.baseURL + "api/exportExcel?Authorization=" + token;
      }
      iframe.style.display = "none";//iframe隐藏，页面上不要显示出来
      document.body.appendChild(iframe);

      //2、后端就给前端返回一个Excel文件（我们写这个代码，在后端项目中去写）
      //3、浏览器接收到该Excel文件后弹出下载框进行下载（这一步是浏览器做的，我们不需要管）
    },

    //批量导出
    batchExportExcel() {
      this.exportExcel(null);
    },

    //选择导出
    chooseExportExcel(){
      if (this.customerIdArray.length <= 0){
        messageTip("请选择要导出的数据", "warning");
        return;
      }
      //ids = "1,3,5,7";
      let ids = this.customerIdArray.join(",");
      this.exportExcel(ids);
    },

    //查看客户详情
    view(id) {
      this.$router.push("/dashboard/customer/detail/" + id);
    },

    //加载字典数据
    loadDicValue(typeCode) {
      doGet("/api/dicvalue/" + typeCode, {}).then(resp => {
        if (resp.data.code === 200) {
          if (typeCode === 'appellation') {
            this.appellationOptions = resp.data.data;
          } else if (typeCode === 'needLoan') {
            this.needLoanOptions = resp.data.data;
          } else if (typeCode === 'intentionState') {
            this.intentionStateOptions = resp.data.data;
          } else if (typeCode === 'clueState') {
            this.clueStateOptions = resp.data.data;
          } else if (typeCode === 'source') {
            this.sourceOptions = resp.data.data;
          } else if (typeCode === 'activity') {
            this.activityOptions = resp.data.data;
          } else if (typeCode === 'product') {
            this.productOptions = resp.data.data;
          }
        }
      })
    },

    //加载负责人
    loadOwner(){
      doGet("/api/owner",{}).then(resp=>{
        if (resp.data.code === 200){
          this.ownerOptions = resp.data.data;
        }
      })
    },

    //搜索
    onSearch(){
      this.getData(1);
    },

    //搜索条件重重（清空）
    onReset(){
      this.customerQuery = {};
      //页面刷新
      this.reload();
    },



  }
}
</script>

<style scoped>
.el-table{
  margin-top: 10px;
}
</style>